/**
 * Created by 居胜 on 2016/5/11.
 */
(function(){

    //选择器
    function $(id){
        return document.getElementById(id);
    }

    //数据校验，数字是否在10-100之内，
    //如果数据合法，返回
    function checkInput(){
        var inputNum = $("num-input").value;
        $("num-input").value = "";
        if( !/^\d+$/.test(inputNum) || parseInt(inputNum) < 10 ||  parseInt(inputNum) > 100 ){
            alert("input error");
            return false;
        }
        return parseInt(inputNum);
    }

    //事件绑定函数
    //事件名： on + ~~ 的形式
    function bindEvent(ele, event_name, func){
        if(window.addEventListener){
            event_name = event_name.replace(/^on/, "")
            ele.addEventListener(event_name, func, false);
        }else if(window.attachEvent) {
            ele.attachEvent(event_name, func);
        }else{
            ele[event_name] = func;
        }
    }

    //保存数据的数组
    var data = [12, 44, 23, 16, 24, 56, 33, 57, 15, 29, 89,78,15,46,73,54,64,88,27];
    var num;

    //根据数组中的数据渲染页面
    function render(){
        var dataToHtml = data.map(function(item){
            return "<div class='num_block'><div class='num' style='height: "+item+"%;'>" + item + "</div></div>";
        }).join("");
        $("display").innerHTML = dataToHtml;
    }

    //点击事件绑定
    bindEvent($("left-in"), "onclick", function () {
        if((num= checkInput() ) !== false){
            data.unshift(num);
        }
        render();
    })

    bindEvent($("left-out"), "onclick", function(){
        if($("display").children.length !== 0){
            data.shift();
        }
        render();
    })

    bindEvent($("right-in"), "onclick", function(){
        if((num= checkInput() ) !== false){
            data.push(num)
        }
        render();
    })

    bindEvent($("right-out"), "onclick", function(){
        if($("display").children.length !== 0){
            data.pop();
        }
        render();
    })


    //事件代理
    bindEvent($("display"), "onclick", function(event){
        var target = event.target;
        if (target.className.toUpperCase() === "NUM"){
            var clickNum = target.innerHTML;
            var index = data.indexOf(parseInt(clickNum));
            if(index > -1) {
                data.splice(index, 1);
            }
            render();
        }

    })

    function sort(numberMillis){
        var i = 0, j = 0;
        var timer = setInterval(run, 100);

        function run(){
            console.log(new Date())
            if(i < data.length){
                if (j < data.length -i){
                    if (data[j] > data[j+1]){
                        var temp;
                        temp = data[j];
                        data[j] = data[j+1];
                        data[j+1] = temp;
                        render();

                    }else{
                    }
                    j++;
                }else {
                    i++;
                    j = 0;
                }
            }else {
                clearInterval(timer);
                return;
            }

        }
        
        return data;
    }


    bindEvent($("sort"), "onclick", function () {
        sort(500)

    })

    render();
    
})();